<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AutoComplete Search Box</title>

<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/autocomplete/assets/skins/sam/autocomplete.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yuiloader-dom-event/yuiloader-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/selector/selector-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/autocomplete/autocomplete-min.js"></script>


<style type="text/css">
    #sitesearch {text-align:center; position:relative;}
	#searchinput {position:static;width:30em; font-size:11px; font-weight:bold; width:30em;}
	#searchcontainer {text-align:left; width:34em; overflow:hidden; }
	#searchcontainer .yui-ac-bd {font-size:10px; color:#666; background-color:#E1E7F3; text-align:left;}
	#searchcontainer li {overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
	#searchcontainer em {font-style:normal; font-weight:bold; color:#000033;}
	.yui-ac-ft {padding:3px; font-size:10px; text-align:right;}*/
</style>
</head>

<body class="yui-skin-sam">

<!--Use a real form; if JS is not enabled, or if the user
    hits enter in the search field, we want to go to Yahoo
    search and provide a standard search results page.-->
<form action="http://search.yahoo.com/search" method="get" id="sitesearchform">

<!--Restrict the search suggestions to specific sites:-->
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">

<!--This element contains our AutoComplete elements and
    the submit button.-->
<div id="sitesearch">
	<label for="searchinput">Site Search: </label>
    <!--The search container is the element that AutoComplete
        will use to show search suggestions.-->
    <input type="text" id="searchinput" name="p">
	<input type="submit" value="Search" id="searchsubmit">    
    <div id="searchcontainer"></div>
</div>
</form>

<script type="text/javascript">

/* YUI, by default, creates an namespace called "example";
   we'll use that here, adding to it a new module space
   in which to house our application: */
YAHOO.example.SiteSearch = new function(){

	/* First, we'll create our DataSource, using the Script
	   Node DataSource constructor.  We pass in the base URL
	   and the schema that we'll use to map the returned 
	   data. */
    this.oDataSource = new YAHOO.widget.DS_ScriptNode("http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&site=developer.yahoo.com&site=yuiblog.com&region=us", ["ResultSet.Result","Title","Url","ClickUrl"]);

    /* With all of the pieces in hand, we can now instantiate
	   and configure our AutoComplete instance: */
    this.oAutoComp = new YAHOO.widget.AutoComplete(
		"searchinput", // the input field's ID
		"searchcontainer", // the suggestion container's ID
		this.oDataSource, // the DataSource
		{  // here, we begin our configuration options:
			autoHighlight: false, //We don't want the first
			 					  //result highlighted by default.
			animVert: true,		  //Yes, animate the suggestion
								  //container...
			animHoriz: false,	  //but only vertically, not
								  //horizontally.
			animSpeed: 0.3,		  //The animation should last
								  //0.3 seconds.
			minQueryLength: 4,	  //Don't search for results until
								  //the user has entered at least
								  //4 characters in the input field.
			useShadow: true,	  //Build in a drop-shadow.
			prehighlightClassName: "yui-ac-prehighlight"
								  //Use a different highlight style
								  //for mouse-over than for arrow-to.
		});

	/* Formatting your result is the key to having a customized
	   look-and-feel for your AutoComplete implementation.  Here,
	   we do a very simple markup for the result title and the
	   URL for the result. */
    this.oAutoComp.formatResult = function(oResultItem, sQuery) {
        return "<em>" + oResultItem[0] + "</em><br />" + oResultItem[1];
    };
	
	/* We want to have, at the bottom of the search container, a 
	   link making it obvious to the user how s/he can find all
	   results for the current query.  We'll use AutoComplete's
	   built-in footer mechanism for that, adding a link to which
	   we'll wire a form-submit event: */
	this.oAutoComp.setFooter("<a id='sitesearchshowall' href='#'>View all search results.</a>");
	
	/* Here's the wiring for the form submission on our footer link.
	   Note that we use the YUI Event Utility to add this listener --
	   this is part of YUI Core. */
	YAHOO.util.Event.on("sitesearchshowall", "click", function(e) {
		/* The Dom Collection's get method is similar to
		   document.getElementById in this instance: */
		YAHOO.util.Dom.get("sitesearchform").submit();
	});

	/* What do we want to do when an item in the suggestion container
	   is selected (either by arrowing and hitting enter or by clicking)?
	   We'll subscribe to the itemSelectEvent and when it fires use its
	   arguments to set a new location for the current page. */
	this.oAutoComp.itemSelectEvent.subscribe(function(type, args) {
		/* this line works around Opera's preventDefault
		   bug: */
		YAHOO.util.Dom.get("searchsubmit").disabled = true;
		
		/* now, we go off to the destination page chosen by
		   the user from the AutoComplete suggestion list: */
		location.href = (args[2][2]);	
	});

	/* We'll use one of AutoComplete's built-in events to position the
	   suggestion container directly below the input field.  AutoComplete
	   handles this for you in non-centered implementations; for notes
	   on the centered implementation shown here, see Jenny Han Donnelly's 
	   tutorial: http://developer.yahoo.com/yui/examples/autocomplete/ac_ysearch_json.html */
    this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
        var pos = YAHOO.util.Dom.getXY(oTextbox);
        pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
        YAHOO.util.Dom.setXY(oContainer,pos);

		/* Workaround for an IE6 rendering bug: */
        document.getElementById("searchcontainer").style.overflow = "visible";

        return true;
    };

	/* Here we'll hack AutoComplete a little bit.  AutoComplete is
	   designed to put the selected item's primary value in the
	   input field.  In this case, that would be the result's Title
	   field.  We don't really want that -- we're using AutoComplete
	   not to do type-ahead but to map to instant results.  So, we'll
	   suppress the standard behavior by overriding a private method
	   on this specific AutoComplete instance: */
	this.oAutoComp._updateValue = function() {
		return true;
	}
	
	
};
</script>


</body>
</html>
